<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2019-07-08
  Time: 9:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="true" %>
<%
    String pash = request.getContextPath();
    String basepash = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + pash + "/";
%>
<html>
<head>
    <base href="<%=basepash%>">
    <title></title>
    <%@include file="/publs.jsp"%>
    <script>
        var cxk="<%=request.getContextPath()%>";
    </script>
</head>
<body>
<div id="root">
    <modal v-model="detailsModel" title="订单详情" width="850">
        <i-table :data="saleDedailtData" :columns="saleDetailsColumns"></i-table>
    </modal>

    <modal title="确认入库" @on-ok="doRuku" v-model="modal" width="750">
        <i-table :data="orderData" :columns="orderCol" border stripe style="margin-top: 15px" :height="300"></i-table>
    </modal>

    <modal title="入库详情" @on-ok="" v-model="modal1" width="900">
        <i-table :data="detailsData" :columns="detailsColumns" border stripe style="margin-top: 15px" :height="300"></i-table>
    </modal>

    <modal title="出库详情" @on-ok="" v-model="tuiModal" width="900">
        <i-table :data="detailsData" :columns="detailsColumns" border stripe style="margin-top: 15px" :height="300"></i-table>
    </modal>

    <div class="demo-split">
        <Split v-model="split2" mode="vertical">
            <div slot="top" class="demo-split-pane">
                <card style="text-align: center"><h3>进货出入</h3></card>
                <i-form :label-width="80" style="margin-top: 20px;">
                    <row>
                        <i-col span="4">
                            <form-item label="出入时间:">
                                <date-picker v-model="localData.jinDate" type="date" format="yyyy-MM-dd"/>
                            </form-item>
                        </i-col>
                        <i-col span="4" style="margin-left: 15px;">
                            <i-button type="info" icon="md-search" @click="selectDate">查询</i-button>
                        </i-col>
                        <i-col span="4">
                            <form-item label="订单属性:">
                                <i-select v-model="supId" @on-change="cgoderSelect">
                                    <i-option value="请选择" :key="0">全部</i-option>
                                    <i-option value="进货" :key="1">入库</i-option>
                                    <i-option value="退货" :key="2">出库</i-option>
                                </i-select>
                            </form-item>
                        </i-col>
                        <i-col span="1" style="margin-left: 10px;">
                            <i-button type="success" icon="md-search" @click="searchState">查询</i-button>
                        </i-col>
                    </row>
                </i-form>
                <i-table :data="tableData" :columns="columns" border stripe>
                    <template slot="qualState" slot-scope="{row}">
                        <span v-if="row.qualState=='1'">未入库</span>
                        <span v-if="row.qualState=='2'">已入库</span>
                        <span v-if="row.qualState=='3'">已出库</span>
                    </template>
                    <template slot="caozuo" slot-scope="{row}">
                        <span><i-button type="info" icon="md-build" @click="orderDetails(row)" v-if="row.qualState=='1'">确认入库</i-button></span>
                        <span><i-button type="success" icon="md-search" @click="openModal(row)" v-if="row.qualState=='2'">查看详情</i-button></span>
                        <span><i-button type="success" icon="md-search" @click="openTui(row)" v-if="row.qualState=='3'">查看详情</i-button></span>
                    </template>
                </i-table>
            </div>
            <div slot="bottom" class="demo-split-pane" style="background-color: white">
                <card style="text-align: center;margin-bottom: 25px"><h3>销售出入</h3></card>
                <i-form :label-width="80" style="">
                    <row>
                        <i-col span="4">
                            <form-item label="出入时间:">
                                <date-picker v-model="localData.saleDate" type="date" format="yyyy-MM-dd"/>
                            </form-item>
                        </i-col>
                        <i-col span="4" style="margin-left: 15px;">
                            <i-button type="info" icon="md-search" @click="saleDate">查询</i-button>
                        </i-col>
                        <i-col span="4">
                            <form-item label="订单属性:">
                                <i-select v-model="types" @on-change="xiaoSelect">
                                    <i-option value="请选择" :key="0">全部</i-option>
                                    <i-option value="退货" :key="1">入库</i-option>
                                    <i-option value="购买" :key="2">出库</i-option>
                                </i-select>
                            </form-item>
                        </i-col>
                        <i-col span="1" style="margin-left: 10px;">
                            <i-button type="success" icon="md-search" @click="searchTypes">查询</i-button>
                        </i-col>
                    </row>
                </i-form>
                <i-table :data="xiaoData" :columns="xiaoColumns"  border stripe>
                    <template slot="state" slot-scope="{row}">
                        <span v-if="row.types=='购买'">出库</span>
                        <span v-if="row.types=='退货'">入库</span>
                    </template>
                    <template slot="xiaoOperation" slot-scope="{row}">
                        <span><i-button type="success" icon="md-search" @click="searchDetails(row)" >查看详情</i-button></span>
                    </template>
                </i-table>
            </div>
        </Split>
    </div>

</div>

<script>
    new Vue({
        el:"#root",
        data:{
            split2:0.45,
            tableData:[],
            columns:[
                {title:"编号",key:"cgoId"},
                {title:"操作人",key:"anames"},
                {title:"订单状态",key:"qualState",slot:"qualState"},
                {title:"订单属性",key:"supId"},
                {title:"操作",slot:"caozuo"}
            ],
            modal:false,
            modal1:false,
            orderData:[],
            orderCol:[
                {title:"编号",key:"id"},
                {title:"供应商",key:"companyName"},
                {title:"药品名称",key:"drugsName"},
                {title:"数量",key:"purNumber"},
            ],
            detailsData:[],
            detailsColumns:[
                {title:"编号",key:"id"},
                {title:"供应商",key:"companyName"},
                {title:"药品名称",key:"drugsName"},
                {title:"数量",key:"purNumber"},
                {title:"入库时间",key:"atime"}
            ],
            tuiData:[],
            tuiColumns:[
                {title:"出库编号",key:"cgoId"},
                {title:"操作人",key:"anames"},
                {title:"出库时间",key:"atime"},
                {title:"操作",slot:"operation"}
            ],
            tuiModal:false,
            supId:"请选择",
            xiaoData:[],
            xiaoColumns:[
                {title:"编号",key:"id"},
                {title:"订单状态",slot:"state"},
                {title:"操作时间",key:"goumaishijian"},
                {title:"操作",slot:"xiaoOperation"}
            ],
            types:"请选择",
            localData:{},
            detailsModel:false,
            saleDedailtData:[],
            saleDetailsColumns:[
                {title:"编号",key:"id"},
                {title:"药品编号",key:"drugsid"},
                {title:"数量",key:"number"},
                {title:"购买时间",key:"atime"}
            ]
        },
        methods:{
            searchAll(){
                axios.get(`${cxk}/access/searchAll`)
                    .then(({data})=>{
                        this.tableData=data.obj;
                    })
            },
            orderDetails(row){
                this.modal=true;
                axios.post(`${cxk}/access/searchOrderId?orderId=${row.cgoId}`)
                    .then(({data})=>{
                        this.orderData = data.obj;
                        this.receId = row.cgoId
                    })
            },
            doRuku(){
                axios.post(`${cxk}/access/updDrugsNumber?receId=${this.receId}`,this.orderData)
                    .then(({data})=>{
                        iview.Message.warning(data.msg);
                        this.serchAll();
                    })

            },
            openModal(row){
                this.modal1=true;
                axios.post(`${cxk}/access/searchOrderId?orderId=${row.cgoId}`)
                    .then(({data})=>{
                        this.detailsData = data.obj;
                    })
            },
            searchTui(){
                axios.get(`${cxk}/access/searchTui`)
                    .then(({data})=>{
                        this.tuiData = data.obj;
                    })
            },
            openTui(row){
                this.tuiModal=true;
                axios.post(`${cxk}/access/searchOrderId?orderId=${row.cgoId}`)
                    .then(({data})=>{
                        this.detailsData=data.obj;
                    })
            },
            cgoderSelect(a){
                this.cgoderId=a;
            },
            searchState(){
                axios.get(`${cxk}/access/searchState?supId=${this.supId}`)
                    .then(({data})=>{
                        this.tableData = data.obj;
                    })
            },
            searchOrder(){
                axios.get(`${cxk}/zOnInSearch/searchAll`)
                    .then(({data})=>{
                        this.xiaoData = data.obj;
                    })
            },
            xiaoSelect(a){
                this.types=a;
            },
            searchTypes(){
                axios.get(`${cxk}/zOnInSearch/searchTyeps?types=${this.types}`)
                    .then(({data})=>{
                        this.xiaoData = data.obj;
                    })
            },
            searchDetails(row){
                this.detailsModel = true;
                axios.post(`${cxk}/zOnInSearch/searchDetails?orderIds=${row.id}`)
                    .then(({data})=>{
                        this.saleDedailtData = data.obj;
                    })
            },
            selectDate(){
                this.localData.jinDate = moment(this.localData.jinDate).format("YYYY-MM-DD")
                axios.post(`${cxk}/access/searchDate`,this.localData)
                    .then(({data})=>{
                        this.tableData = data.obj;
                    })
            },
            saleDate(){
                this.localData.saleDate = moment(this.localData.saleDate).format("YYYY-MM-DD")
                axios.post(`${cxk}/zOnInSearch/searchDate`,this.localData)
                    .then(({data})=>{
                        this.xiaoData = data.obj;
                    })
            }
        },
        mounted(){
            this.searchAll();
            this.searchTui();
            this.searchOrder();
        }
    })
</script>
</body>
</html>
